<template>
	<view>
		<!-- #ifndef H5 -->
		<u-navbar :is-back="false" title="省钱兄交友盲盒">
			<view class="slot-wrap">
				<image :src="image_url" class="slot-wrap-image" @click="bindlogin"></image>
			</view>
		</u-navbar>
		<!-- #endif -->
		<view class="content">
			<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#333333" font-size="28rpx"
				@change="change"></u-tabs>
			<!-- part1 -->
			<view class="taba tans" style="margin-bottom: 50rpx;" :class="{dis:current == 0}">
				<view class="inv-h-w">
					<block v-for="(item,index) in items" :key="index">
						<view :class="['inv-h',Inv== index?'inv-h-se':'']" @click="changeTab(index)">{{item}}</view>
					</block>
					<!--<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">我是选项卡二</view>-->
				</view>
				<view v-for="(item,index) in newlist" :key="index">
					<view class="box_list">
						<view class="list_name">
							<view style="width: 65%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
								微信号：{{item.wxCode}}</view>
							<view style="width: 35%;"><text
									style="color: #FF88A1;border-right: 1rpx solid #cccccc;padding-right: 20rpx;">{{item.sex == 1 ? '男生' : '女生'}}</text>
								<text style="margin-left: 20rpx;">{{item.city ? item.city : '未知'}}</text>
							</view>
						</view>
						<view class="list_content">{{item.content}}</view>
						<view class="list_image">
							<!-- <shmily-drag-image class="list_image_image" :checkSelect="false" :list.sync="item.img">
							</shmily-drag-image> -->
							<view style="display: flex;" v-if="item.img" v-for="(items,indexs) in item.img">
								<image :src="items" class="list_image_image" @tap="selectPhoto(items)"></image>
							</view>
						</view>
						<view class="list_tit">
							<view style="color: #999999;font-size: 20rpx;letter-spacing: 2rpx;">
								<view v-if="Inv == 0"> 已被<text>{{item.counts ? item.counts : 0}}</text>人抽到</view>
							</view>
							<view v-if="Inv == 0" class="list_bt" @tap="deleteNewListItem(item)">删除</view>
							<view v-if="Inv == 1 && item.wxCode" class="list_bt" @tap="copyWxCode(item.wxCode)">复制微信号
							</view>
						</view>
					</view>
				</view>

				<!-- 加载更多提示 -->
				<view class="s-col is-col-24" v-if="newlist.length > 0">
					<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
				</view>
				<empty v-if="Inv == 0 && newlist.length == 0" des="暂无放入纸条" show="false"></empty>
				<empty v-if="Inv == 1 && newlist.length == 0" des="暂无抽取纸条" show="false"></empty>
			</view>
			<!-- paer2 -->
			<view class="taba" :class="{dis:current == 1}">
				<view class="content_manghe">
					<view class="wrap">
						<u-swiper :list="list_img" @click="bannerClick"></u-swiper>
					</view>
					<view class="manghe_box">
						<view class="box_left" v-if="ManImage">
							<view class="img">
								<image :src="ManImage"></image>
							</view>
							<view class="btn_box">
								<view class="anniu" @click="bindTocard(1,0)">放入纸条</view>
								<view class="annius" @click="bindcard(1,1)">抽取纸条</view>
							</view>
						</view>
						<view class="box_right" v-if="girlImage">
							<view class="img">
								<image :src="girlImage"></image>
							</view>
							<view class="btn_box">
								<view class="anniu" @click="bindTocard(2,0)">放入纸条</view>
								<view class="annius" @click="bindcard(2,1)">抽取纸条</view>
							</view>
						</view>
					</view>
				</view>
				<view class="manghe_tit">
					<view style="border-right: 2rpx solid #CCCCCC;padding-right: 20rpx;" @click="show = true">玩家须知
					</view>
					<view style="border-right: 2rpx solid #CCCCCC;padding-right: 20rpx;margin-left: 20rpx;"
						@click="kefu = true">联系客服
					</view>
					<view style="border-right: 2rpx solid #CCCCCC;padding-right: 20rpx;margin-left: 20rpx;"
						@click="goXieyi">用户协议
					</view>
					<view style="margin-left: 20rpx;"
						@click="kefu = true">投诉举报</view>
				</view>
			</view>

			<!-- 玩家须知 -->
			<u-popup v-model="show" mode="bottom" :closeable="closeable" close-icon-pos="top-left"
				style="height: 100vh;" border-radius="14">
				<view class="player_content">
					<view class="player_title">玩家须知</view>
					<scroll-view scroll-y="true"
						style="margin-top: 30rpx;height: 600rpx;padding: 0rpx 20rpx;width: 95%;">
						<view v-html="gameMessage"></view>
					</scroll-view>
					<view class="card_btn" @click="bindclose">我知道了</view>
				</view>
			</u-popup>

			<!-- 联系客服  投诉举报 -->
			<u-popup v-model="kefu" mode="bottom" :closeable="closeable" close-icon-pos="top-left"
				style="height: 100vh;" border-radius="14">
				<view class="player_content" style="height: 600rpx;">
					<view class="player_title">长按二维码添加客服微信</view>
					<view class="kefu_tit" @tap="copyWxCode(kefuWx)">点击复制我ID：{{kefuWx}}</view>
					<view class="kefu_img">
						<image @tap="selectPhoto(warningErweima)" :src="warningErweima"></image>
					</view>
					<!-- <view class="card_btn" @click="bindclose">我知道了</view> -->
				</view>
			</u-popup>

			<!-- 支付方式 -->
			<u-popup v-model="payPopu" mode="bottom" :closeable="closeable" close-icon-pos="top-left"
				style="height: 100vh;" border-radius="14" close-icon-color="#000000">
				<view class="cards_content" style="height: 320rpx;">
					<view class="cards_title">请选择支付方式</view>
					<view class="pay_image">
						<view style="width: 50%;text-align: center;" v-for="(item,index) in payList"
							@tap="paySelect(index)">
							<image :src="item.image" style="width: 80rpx;height: 80rpx;"></image>
							<view class="">{{item.name}}</view>
						</view>
					</view>
					<!-- <view class="card_price">{{cardlists.price}}</view> -->
					<!-- <view class="card_btn1" @tap="quSave">确定</view> -->
				</view>
			</u-popup>

			<!-- 抽取纸条 -->
			<u-popup v-model="cards" mode="bottom" :closeable="closeable" close-icon-pos="top-left"
				style="height: 100vh;" border-radius="14" close-icon-color="#000000">
				<view class="cards_content">
					<view class="cards_title">抽取一张{{cardlists.name}}纸条</view>
					<view class="card_image">
						<image :src="cardlists.image"></image>
					</view>
					<view class="card_price">{{cardlists.price}}</view>
					<view class="card_btn1" @tap="quSave">确定抽取</view>
				</view>
			</u-popup>

			<!-- 放入纸条 -->
			<u-popup v-model="card" mode="bottom" :closeable="closeable" close-icon-pos="top-left"
				style="height: 100vh;" border-radius="14" close-icon-color="#000000">
				<view class="cards_content">
					<view class="cards_title">放入一张{{cardlist.name}}纸条</view>
					<view class="card_box">
						<u-input v-model="value" :type="type" :border="border" style="height: 150upx;" :maxlength="50"
							placeholder='您的交友简介(介绍自己或对另一半的期待)...' placeholder-class="input-empty" />
						<view style="margin-top: 30rpx;width: 100%;height: 150rpx;">
							<!-- <shmily-drag-image :list.sync="imageList" :number="3">
							</shmily-drag-image> -->
							<u-upload ref="uUpload" :action="action" :auto-upload="true" :maxCount="3"
								@on-choose-complete="onSuccess" @on-remove="onRemove"></u-upload>
						</view>
						<view class="card_tit">
							<view style="color: #000000;">我的微信号<u-icon name="arrow-right" color="#000000"></u-icon>
							</view>
							<u-input v-model="value1" :type="type1" :border="border" inputAlign="right"
								placeholder="只有抽到你的人才能看到" />
						</view>
					</view>
					<view class="card_btn" @tap="fangSave">确定放入</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
	var qqmapsdk;
	// #endif
	// 调用手机系统权限
	// #ifdef APP-PLUS
	import permision from "../../common/permission.js";
	// #endif
	import configdata from '../../common/config.js';
	import shmilyDragImage from '@/components/shmily-drag-image/shmily-drag-image.vue'
	export default {
		components: {
			shmilyDragImage
		},
		data() {
			return {
				list: [{
					name: '我的纸条'
				}, {
					name: '抽个对象'
				}],
				payList: [{
						id: 0,
						image: '../../static/img/icon_weixin.png',
						name: '微信'
					},
					{
						id: 1,
						image: '../../static/img/zhifubao.png',
						name: '支付宝'
					}
				],
				kefuWx: '',
				city: '',
				latitude: '',
				longitude: '',
				current: 1,
				sexIndex: 1, //1，男 2，女
				selectIndex: 0, // 0：放入纸条  1，抽取纸条
				image_url: '/static/logo.png',
				ManImage: '',
				girlImage: '',
				list_img: [],
				// 玩家须知弹框
				show: false,
				gameMessage: '',
				warningErweima: '',
				closeable: true,
				//支付方式
				payPopu: false,
				// 联系客服
				kefu: false,
				// 抽取纸条
				cards: false,
				listcards: [],
				cardlists: '',
				newlist: [],
				// 放入纸条
				card: false,
				ruMoney: 0,
				quMoney: 0,
				listcard: [{
					id: 0,
					name: '男生'
				}, {
					id: 1,
					name: '女生'
				}],
				cardlist: '',
				value: '',
				type: 'textarea',
				border: false,
				action: 'https://manghe.xianmxkj.com/sqx_fast/alioss/upload',
				value1: '',
				type1: 'text',
				// 我的纸条
				Inv: 0,
				items: ['我放入的纸条', '我抽取的纸条'],
				authorize: false,
				userId: '',
				nickName: '',
				money: 0,
				//存放图片集合
				imageList: [],
				page: 1,
				size: 10,
				loadingType: 0,
				scrollTop: false,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad(d) {
			this.getBannerList();
			this.action = this.config("APIHOST") + '/alioss/uploadUniApp';
			this.getSetting();
			let that = this;
			if (d.invitation) {
				this.$queue.setData('invitation', d.invitation);
				console.log(d.invitation)
			}
			// #ifdef MP-WEIXIN
			if (d.scene) {
				const scene = decodeURIComponent(d.scene);
				this.$queue.setData('invitation', scene.split(',')[0]);
			}
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: 'RSQBZ-VKUWW-7WLRP-RVFJ5-TNOBJ-GNB3Z'
			});
			that.authorizationLocation();
			// #endif

			// #ifdef APP-PLUS
			this.getLocation();
			// #endif

			// #ifdef H5
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.selectCity(res.longitude, res.latitude);
				},
				fail(e) {
					console.log(e);
				}
			});
			// #endif
		},
		onShow() {
			let image_url = this.$queue.getData('avatar');
			if (image_url && image_url !== 'undefined') {
				this.image_url = image_url;
			} else {
				this.image_url = '/static/logo.png';
			}

			let userId = this.$queue.getData('userId');
			if (userId) {
				this.userId = userId;
				this.getUserInfo();
			}
		},
		methods: {
			onRemove(lists) {
				this.imageList = lists;
			},
			onSuccess(lists) {
				this.imageList = lists;
			},
			//退出登录
			toLogout() {
				let that = this;
				uni.showModal({
					title: '退出提醒',
					content: '确定要退出登录么',
					success: e => {
						if (e.confirm) {
							that.$queue.remove('token');
							that.$queue.remove('userId');
							that.$queue.remove('openId');
							that.$queue.remove('userName');
							that.$queue.remove('invitationCode');
							that.$queue.remove('avatar');
							that.$queue.remove('relation_id');
							that.$queue.remove('relation');

							let image_url = that.$queue.getData('avatar');
							if (image_url && image_url !== 'undefined') {
								that.image_url = image_url;
							} else {
								that.image_url = '/static/logo.png';
							}

							that.userId = '';
						}
					}
				});
			},
			paySelect(index) {
				let userId = this.$queue.getData('userId');
				this.payPopu = false;
				if (index == 0) { //微信支付
					if (this.selectIndex == 0) { //放入纸条
						// #ifdef APP-PLUS
						let userId = this.$queue.getData('userId');
						this.$Request.postJson('/app/wxPay/payAppScrip?scripId=' + this.scripId).then(res => {
							if (res.code == 0) {
								this.setPayment('wxpay', JSON.stringify(res.data));
							} else {
								uni.hideLoading();
								this.$queue.showToast(res.msg);
							}
							// this.setPayment('wxpay', JSON.stringify(res));
						});
						// #endif
					} else if (this.selectIndex == 1) { //抽取纸条
						// #ifdef APP-PLUS
						this.$Request.postJson('/app/wxPay/wxPayAppDrawScrip?userId=' + userId + '&sex=' + this.sexIndex)
							.then(
								res => {
									if (res.code == 0) {
										this.setPayment('wxpay', JSON.stringify(res.data));
									} else {
										uni.hideLoading();
										this.$queue.showToast(res.msg);
									}
								});
						// #endif
					}
				} else if (index == 1) { //支付宝支付
					if (this.selectIndex == 0) { //放入纸条
						// #ifdef APP-PLUS
						let userId = this.$queue.getData('userId');
						this.$Request.postJson('/app/aliPay/payAppScrip?scripId=' + this.scripId).then(res => {
							if (res.code == 0) {
								this.setPayment('alipay', res.data);
							} else {
								uni.hideLoading();
								this.$queue.showToast(res.msg);
							}
							// this.setPayment('wxpay', JSON.stringify(res));
						});
						// #endif
					} else if (this.selectIndex == 1) { //抽取纸条
						// #ifdef APP-PLUS
						this.$Request.postJson('/app/aliPay/payAppDrawScrip?userId=' + userId + '&sex=' + this.sexIndex)
							.then(
								res => {
									if (res.code == 0) {
										this.setPayment('alipay', res.data);
									} else {
										uni.hideLoading();
										this.$queue.showToast(res.msg);
									}
									// this.setPayment('wxpay', JSON.stringify(res));
								});
						// #endif
					}
				}
			},
			getUserInfo() {
				this.$Request.getT('/app/user/selectUserById').then(res => {
					if (res.code == 0) {
						this.userId = res.data.userId;
						this.nickName = res.data.userName;
					}
				});
			},
			getSetting() {
				this.$Request.getT('/app/common/type/175').then(res => {
					if (res.code == 0) {
						if (res.data && res.data.value) {
							this.$queue.setData('gameMessage', res.data.value);
							this.gameMessage = res.data.value;
							this.show = true;
						}
					}
				});
				//客服微信号
				this.$Request.getT('/app/common/type/44').then(res => {
					if (res.code == 0) {
						if (res.data && res.data.value) {
							this.$queue.setData('kefuWx', res.data.value);
							this.kefuWx = this.$queue.getData('kefuWx');
						}
					}
				});
				//投诉举报二维码 177
				this.$Request.getT('/app/common/type/177').then(res => {
					if (res.code == 0) {
						if (res.data && res.data.value) {
							this.$queue.setData('warningErweima', res.data.value);
							this.warningErweima = this.$queue.getData('warningErweima')
						}
					}
				});
			},
			goXieyi() {
				uni.navigateTo({
					url: '/pages/login/xieyi'
				});
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			selectCity(longitude, latitude) {
				this.$Request.getT('/app/Login/selectCity?lat=' + latitude + '&lng=' + longitude).then(res => {
					if (res.code == 0) {
						this.city = res.data;
					}
				});
			},
			async checkPermission() {
				let status = permision.isIOS ? await permision.requestIOS('location') : await permision.requestAndroid(
					'android.permission.ACCESS_FINE_LOCATION');
				if (status === null || status === 1) {
					status = 1;
				} else if (status === 2) {
					uni.showModal({
						content: "系统定位已关闭",
						confirmText: "确定",
						showCancel: false,
						success: function(res) {}
					})
				} else if (status.code) {
					uni.showModal({
						content: status.message
					})
				} else {
					this.authorize = true; //用户是否拒绝了定位授权
					// this.yu.setCache('currentCity', '访问位置被拒绝');
					// this.userInfo.currentLocation = '访问位置被拒绝'
					uni.showModal({
						title: '定位服务已关闭',
						content: "您需要打开定位权限，获取更多服务信息。请到设置>隐私>定位服务中开启【油团团】定位服务",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			},
			//获取用户位置信息（判断了用户是否授权定位权限，未授权跳转系统设置）----- 开始
			async getLocation() {
				// #ifdef APP-PLUS
				let status = await this.checkPermission();
				if (status !== 1) {
					return;
				}
				// #endif
				this.doGetLocation();
			},
			doGetLocation() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						let s = res.address.city.substring(0, res.address.city.length - 1);
						// this.userInfo.currentLocation = s;
						this.city = s;
						this.authorize = false; //用户是否拒绝了定位授权 true:用户拒绝 false:用户授权
					},
					fail: (err) => {
						// #ifndef MP-BAIDU
						if (err.errMsg.indexOf("auth deny") >= 0) {
							uni.showToast({
								title: "访问位置被拒绝"
							})
						} else {
							// uni.showToast({
							// 	title: err.errMsg
							// })
						}
						// #endif
					}
				});
			},
			initLocation(latitude, longitude) {
				var that = this;
				qqmapsdk.reverseGeocoder({
					location: latitude + ',' + longitude || '',
					success: function(res) { //成功后的回调
						if (res.status == 0) {
							that.authorize = false;
							var res = res.result;
							that.latitude = latitude;
							that.longitude = longitude;
							let s = res.ad_info.city.substring(0, res.ad_info.city.length - 1);
							that.city = s;
						}
					},
					fail: function(error) {
						console.error(error);
					},
					complete: function(res) {
						console.log(res);
					}
				})
			},
			startSetting() {
				let that = this;
				// #ifdef APP-PLUS
				permision.gotoAppSetting();
				// #endif
				// #ifdef MP-WEIXIN
				uni.openSetting({
					success(res3) {
						console.log(res3)
						if (res3.authSetting[
								'scope.userLocation'
							]) {
							uni.hideToast();
							that.initMyPosition();
						} else {
							that.authorizationLocation();
						}
						// 已授权-(获取位置信息)
					}
				});
				// #endif
			},
			initMyPosition() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success: res => {
						that.initLocation(res.latitude, res.longitude);
					}
				});
			},
			authorizationLocation: function() {
				let that = this;
				uni.getSetting({
					success(res1) {
						if (!res1.authSetting['scope.userLocation']) {
							// 未授权
							uni.authorize({
								scope: 'scope.userLocation',
								success() { //1.1 允许授权
									that.initMyPosition();
								},
								fail() { //1.2 拒绝授权
									that.authorize = true; //用户是否拒绝了定位授权 true:用户拒绝 false:用户授权
								}
							})
						} else {
							// 已授权-(获取位置信息)
							that.initMyPosition();
						}
					}
				});
			},
			deleteNewListItem(item) {
				uni.showModal({
					title: '温馨提示',
					content: '您确认要删除当前纸条信息吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$queue.showLoading('删除中...');
							this.$Request.postT('/app/scrip/deleteScripByScripId?scripId=' + item.scripId)
								.then(res => {
									if (res.code == 0) {
										uni.hideLoading();
										this.$queue.showToast('删除成功！')
										setTimeout(d => {
											this.page = 1;
											this.getSelectMyFabuList();
										}, 1000)
									} else {
										uni.hideLoading();
										this.$queue.showToast(res.msg);
									}
								});
						}
					}
				});
			},
			getSelectMyFabuList() {
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...'
				});
				let userId = this.$queue.getData('userId');
				if (this.Inv == 0) {
					this.$Request.getT('/app/scrip/selectScripPage?userId=' + userId + '&page=' + this.page + '&limit=' +
						this
						.size).then(res => {
						if (res.code == 0) {
							if (this.page == 1) {
								this.newlist = [];
							}

							res.data.list.forEach(d => {
								if (d.img) {
									d.img = d.img.split(',');
								}
								this.newlist.push(d);
							});
							if (res.data.list.length == this.size) {
								this.loadingType = 0;
							} else {
								this.loadingType = 3;
							}
						} else {
							this.loadingType = 2;
						}
						uni.hideLoading();
					});
				} else {
					this.$Request.getT('/app/scrip/selectDrawScripPage?userId=' + userId + '&page=' + this.page +
						'&limit=' +
						this
						.size).then(res => {
						if (res.code == 0) {
							if (this.page == 1) {
								this.newlist = [];
							}

							res.data.list.forEach(d => {
								if (d.img) {
									d.img = d.img.split(',');
								}
								this.newlist.push(d);
							});
							if (res.data.list.length == this.size) {
								this.loadingType = 0;
							} else {
								this.loadingType = 3;
							}
						} else {
							this.loadingType = 2;
						}
						uni.hideLoading();
					});
				}
			},
			copyWxCode(WxCode) {
				uni.setClipboardData({
					data: WxCode,
					success: r => {
						this.$queue.showToast('复制成功')
					}
				});
			},
			quSave() {
				this.$queue.showLoading('抽取中...')
				let that = this;
				let userId = this.$queue.getData('userId');
				this.cards = false;

				// #ifdef APP-PLUS
				this.payPopu = true;
				uni.hideLoading();
				// #endif

				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase();
				if (ua.indexOf('micromessenger') !== -1) {
					this.$Request.postT('/app/wxPay/wxPayMpDrawScrip?userId=' + userId + '&sex=' + this.sexIndex).then(
						res => {
							if (res.code == 0) {
								that.callPay(res.data);
							} else {
								uni.hideLoading();
								that.$queue.showToast(res.msg);
							}
						});
				} else {
					// this.$queue.showToast('请在微信打开进行支付！');
					this.$Request.postT('/app/aliPay/payOrderDrawScrip?userId=' + userId + '&sex=' + this.sexIndex).then(
						res => {
							if (res.code == 0) {
								const div = document.createElement('div')
								div.innerHTML = res.data //此处form就是后台返回接收到的数据
								document.body.appendChild(div)
								document.forms[0].submit()
							} else {
								uni.hideLoading();
								that.$queue.showToast(res.msg);
							}
						});
				}
				// #endif

				// #ifdef MP-WEIXIN
				this.$Request.postT('/app/wxPay/wxPayJsApiDrawScrip?userId=' + userId + '&sex=' + this.sexIndex).then(
					res => {
						if (res.code == 0) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timestamp,
								nonceStr: res.data.noncestr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.sign,
								success: function(res) {
									uni.showLoading({
										title: '支付成功'
									});
									uni.hideLoading();
									setTimeout(() => {
										that.page = 1;
										that.getSelectMyFabuList();
										that.current = 0;
									}, 1000);
								},
								fail: function(err) {
									uni.hideLoading();
									that.$queue.showToast('支付失败');
								}
							});
						} else {
							uni.hideLoading();
							that.$queue.showToast(res.msg);
						}
					});
				// #endif
			},
			fangSave() {
				uni.showLoading({
					title: '加载中...'
				});
				if (this.value == '') {
					uni.hideLoading();
					this.$queue.showToast('请输入纸条内容！');
					return;
				}

				if (this.value1 == '') {
					uni.hideLoading();
					this.$queue.showToast('请输入微信号！');
					return;
				}

				var image = '';
				for (var i = 0; i < this.imageList.length; i++) {
					if (i === 0) {
						image = this.imageList[i].response;
					} else {
						image = image + ',' + this.imageList[i].response;
					}
				}

				let data = {
					city: this.city,
					content: this.value,
					img: image,
					sex: this.sexIndex,
					wxCode: this.value1
				}
				this.value = '';
				this.value1 = '';
				this.imageList = [];
				this.$Request.postJson('/app/scrip/insertScrip', data).then(res => {
					if (res.code == 0 && res.data.scripId) {
						this.scripId = res.data.scripId;
						this.zhifuMoney(res.data.scripId);
					}
				});
			},
			zhifuMoney(scripId) {
				let that = this;
				this.card = false;

				// #ifdef APP-PLUS
				this.payPopu = true;
				uni.hideLoading();
				// #endif

				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase();
				if (ua.indexOf('micromessenger') !== -1) {
					this.$Request.postT('/app/wxPay/wxPayMpScrip?scripId=' + scripId).then(res => {
						if (res.code == 0) {
							that.callPay(res.data);
						} else {
							uni.hideLoading();
							that.$queue.showToast(res.msg);
						}
					});
				} else {
					// this.$queue.showToast('请在微信打开进行支付！');
					this.$Request.postT('/app/aliPay/payOrderScrip?scripId=' + scripId).then(res => {
						if (res.code == 0) {
							const div = document.createElement('div')
							div.innerHTML = res.data //此处form就是后台返回接收到的数据
							document.body.appendChild(div)
							document.forms[0].submit()
						} else {
							uni.hideLoading();
							that.$queue.showToast(res.msg);
						}
					});
				}
				// #endif

				// #ifdef MP-WEIXIN
				this.$Request.postT('/app/wxPay/wxPayJsApiScrip?scripId=' + scripId).then(res => {
					if (res.code == 0) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timestamp,
							nonceStr: res.data.noncestr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.sign,
							success: function(res) {
								uni.showLoading({
									title: '支付成功'
								});
								uni.hideLoading();
								setTimeout(() => {
									that.current = 0;
									that.page = 1;
									that.getSelectMyFabuList();
								}, 1000);
							},
							fail: function(err) {
								uni.hideLoading();
								that.$queue.showToast('支付失败');
							}
						});
					} else {
						uni.hideLoading();
						that.$queue.showToast(res.msg);
					}
				});
				// #endif
			},
			setPayment(name, order) {
				let that = this;
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						uni.hideLoading();
						uni.showLoading({
							title: '支付成功'
						});
						setTimeout(() => {
							uni.hideLoading();
							that.page = 1;
							that.getSelectMyFabuList();
							that.current = 0;
						}, 1000);
					},
					fail: function(err) {
						uni.hideLoading();
					}
				});
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				if (!response.package) {
					return;
				}
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appid, //公众号名称，由商户传入
						"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.noncestr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式：
						"paySign": response.sign //微信签名
					},
					function(res) {
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.showLoading({
								title: '支付成功'
							});
							setTimeout(() => {
								uni.hideLoading();
								that.page = 1;
								that.getSelectMyFabuList();
								that.current = 0;
							}, 1000);
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
			selectPhoto(item) {
				let imgsArray = [];
				imgsArray[0] = item;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			bannerClick(e) {
				if (this.list_img[e].url) {
					this.toGoodsInfo(this.list_img[e].url)
				}
			},
			toGoodsInfo: function(url) {
				if (url.indexOf('/pages/') !== -1) {
					uni.navigateTo({
						url
					});
				} else {
					//#ifndef H5
					uni.navigateTo({
						url: '/pages/member/webview?url=' + url
					});
					//#endif
					//#ifdef H5
					window.location.href = url;
					//#endif	


				}
			},
			getBannerList() {
				this.$Request.getT('/app/banner/selectBannerList?classify=1').then(res => {
					if (res.code == 0) {
						this.list_img = res.data;
					}
				});

				this.$Request.getT('/app/banner/selectBannerList?classify=2').then(res => {
					if (res.code == 0) {
						// this.list_img = res.data;
						this.ManImage = res.data[1].imageUrl;
						this.girlImage = res.data[0].imageUrl;
					}
				});

				//放入纸条价格
				this.$Request.getT('/app/common/type/157').then(res => {
					if (res.code == 0) {
						if (res.data && res.data.value) {
							this.ruMoney = res.data.value;
						}
					}
				});

				//取出纸条价格
				this.$Request.getT('/app/common/type/158').then(res => {
					if (res.code == 0) {
						if (res.data && res.data.value) {
							this.quMoney = res.data.value;
						}
					}
				});
			},
			change(index) {
				let token = this.$queue.getData('token');
				if (token) {
					this.current = index;
					if (this.current == 0) {
						this.page = 1;
						this.getSelectMyFabuList();
					}

					if (this.current == 1) {
						this.getUserInfo();
					}
				} else {
					this.bindlogin();
				}
			},
			bindcard(sex, selecIndex) {
				let token = this.$queue.getData('token');
				if (token) {
					this.selectIndex = selecIndex;
					this.sexIndex = sex;
					this.cards = true
					let data = {
						id: sex,
						name: sex == 1 ? '男生' : '女生',
						image: sex == 1 ? this.ManImage : this.girlImage,
						price: this.quMoney + '元/张'
					}
					this.cardlists = data
				} else {
					this.bindlogin();
				}
			},
			bindTocard(sex, selecIndex) {
				let token = this.$queue.getData('token');
				if (token) {
					this.selectIndex = selecIndex;
					this.sexIndex = sex;
					this.card = true
					let data = {
						id: sex,
						name: sex == 1 ? '男生' : '女生',
						image: sex == 1 ? this.ManImage : this.girlImage,
						price: this.ruMoney + '元/张'
					}
					this.cardlist = data
				} else {
					this.bindlogin();
				}
			},
			submit() {
				this.$refs.uUpload.upload();
			},
			bindclose() {
				this.show = false
			},
			changeTab(index) {
				let token = this.$queue.getData('token');
				if (token) {
					this.Inv = index;
					this.page = 1;
					this.newlist = [];
					this.getSelectMyFabuList();
				} else {
					this.bindlogin();
				}
			},
			bindlogin() {
				let token = this.$queue.getData('token');
				if (!token) {
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '/pages/login/login'
					})
					// #endif
					// #ifndef MP-WEIXIN
					uni.navigateTo({
						url: '/pages/login/register'
					})
					// #endif
				}
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			if (this.current == 0) {
				this.page = this.page + 1;
				this.getSelectMyFabuList();
			}
		},
		onPullDownRefresh: function() {
			if (this.current == 0) {
				this.page = 1;
				this.getSelectMyFabuList();
			}
		}
	}
</script>

<style>
	page {
		/* background: #F4F4F4; */
	}

	.input-empty {
		font-size: 28rpx;
		color: $u-main-color;
	}

	.yaoqing_view {
		width: 95%;
		display: flex;
		position: fixed;
		bottom: 100rpx;
		justify-content: center;
	}

	.yaoqing_btn {
		width: 520rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #000000;
		color: #FFFFFF;
		border-radius: 50rpx;
	}

	.view1 {
		background-color: #ffffff;
		width: 93%;
		height: 300upx;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-top: 20upx;
	}

	.view2 {
		background-color: #ffffff;
		width: 93%;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}

	.slot-wrap-image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50rpx;
	}

	.content {
		width: 100%;
	}

	.taba {
		background: #FFFFFF;
		display: none;
	}

	.tans {
		background: #F4F4F4;
		height: 100vh;
	}

	.dis {
		display: block;
	}



	/* part2*/
	.content_manghe {
		width: 90%;
		margin: 0 auto;
	}

	.wrap {
		padding-top: 20rpx;
	}

	.manghe_box {
		width: 100%;
		display: flex;
		margin-top: 20rpx;
	}

	.box_left {
		flex: 1;
		margin-right: 10rpx;
		position: relative;
	}

	.box_right {
		flex: 1;
		margin-left: 10rpx;
		position: relative;
	}

	.img image {
		width: 100%;
	}

	.btn_box {
		width: 100%;
		display: flex;
		position: absolute;
		bottom: 7rpx;
		height: 90rpx;
		justify-content: center;
		align-items: center;
	}

	.anniu {
		border: 2rpx solid #ffffff;
		background: black;
		color: #ffffff;
		font-size: 24rpx;
		letter-spacing: 2rpx;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;

	}

	.annius {
		border: 2rpx solid #ffffff;
		background: black;
		color: #ffffff;
		font-size: 24rpx;
		letter-spacing: 2rpx;
		padding: 11rpx 15rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}

	.manghe_tit {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 80rpx;
		font-size: 25rpx;
		color: black;
	}

	/* 玩家须知 */
	.player_content {
		width: 100%;
		margin-top: 30rpx;
		padding-bottom: 100rpx;
	}

	.player_title {
		width: 100%;
		text-align: center;
		font-size: 29rpx;
		color: #000000;
	}

	.player_box {
		width: 90%;
		margin: 0 auto;
		margin-top: 85rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	.player_box text {
		display: block;
		text-indent: 55rpx;
		color: #000000;
		letter-spacing: 2rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
	}

	.player_boxs {
		width: 90%;
		margin: 0 auto;
		margin-top: 585rpx;
		font-size: 26rpx;
		color: #EEA05B;
		margin-left: 90rpx;
	}

	/* 联系客服 */
	.kefu_tit {
		margin-top: 80rpx;
		width: 100%;
		text-align: center;
		font-size: 21rpx;
		position: fixed;
		top: 0rpx;
	}

	.kefu_img {
		width: 100%;
		position: fixed;
		top: 170rpx;
		text-align: center;
	}

	.kefu_img image {
		width: 300rpx;
		height: 300rpx;
	}

	/* 抽取纸条 */
	.cards_content {
		width: 100%;
		margin-top: 30rpx;
		padding-bottom: 100rpx;
	}

	.cards_title {
		width: 100%;
		text-align: center;
		font-size: 29rpx;
		color: #000000;
		letter-spacing: 3rpx;
	}

	.card_image {
		width: 100%;
		height: 400rpx;
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pay_image {
		width: 100%;
		height: 200rpx;
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card_image image {
		width: 45%;
	}

	.card_price {
		position: absolute;
		left: 0rpx;
		right: 0rpx;
		width: 100%;
		text-align: center;
		color: #ffffff;
		letter-spacing: 5rpx;
		/* #ifdef MP-WEIXIN */
		top: 525rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 500rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 510rpx;
		/* #endif */
	}

	.card_btn {
		width: 90%;
		height: 90rpx;
		background: #000000;
		border-radius: 15rpx;
		margin: 40rpx;
		color: #ffffff;
		text-align: center;
		line-height: 90rpx;
		letter-spacing: 4rpx;
	}

	.card_btn1 {
		width: 90%;
		height: 90rpx;
		background: #000000;
		border-radius: 15rpx;
		margin: 60rpx 40rpx 30rpx;
		color: #ffffff;
		text-align: center;
		line-height: 90rpx;
		letter-spacing: 4rpx;
	}

	/* 放入纸条 */
	.card_box {
		width: 90%;
		height: 450rpx;
		margin: 0 auto;
		border: 5rpx solid #000000;
		border-radius: 30rpx;
		margin-top: 30rpx;
		padding: 20rpx;
	}

	.u-list-item {
		width: 75px !important;
		height: 75px !important;
	}

	.card_tit {
		width: 100%;
		height: 70rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* part1 */
	.inv-h-w {
		background-color: #FFFFFF;
		height: 100upx;
		display: flex;
		border: 5rpx solid #000000;
		width: 90%;
		margin: 0 auto;
		border-radius: 8rpx;
		align-items: center;
	}

	.inv-h {
		font-size: 29upx;
		flex: 1;
		text-align: center;
		color: #000000;
		height: 100upx;
		line-height: 100upx;
		position: relative;
	}

	.inv-h-se {
		background: #000000;
		color: #FFFFFF;
		height: 85rpx;
		line-height: 85rpx;
		border-radius: 15rpx;
		margin: 10rpx;
	}

	.box_list {
		width: 90%;
		margin: 0 auto;
		border-radius: 15rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.list_name {
		width: 90%;
		margin: 0 auto;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list_content {
		width: 90%;
		margin: 0 auto;
	}

	.list_image {
		display: flex;
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.list_image_image {
		width: 180rpx;
		height: 180rpx;
		margin-right: 20rpx;
	}

	.list_tit {
		width: 90%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		margin-top: 20rpx;
	}

	.list_bt {
		border: 3rpx solid #333333;
		padding: 8rpx 24rpx;
		font-size: 21rpx;
		color: #000000;
		letter-spacing: 3rpx;
		border-radius: 31rpx;
	}

	/* part 3 */
	.manghe_money {
		width: 90%;
		margin: 0 auto;
	}

	.manghe_money text {
		display: block;
		color: #7E7E7E;
		letter-spacing: 2rpx;
		margin-top: 15rpx;
	}
</style>
